<template>
    <el-card>
        <el-row class="tips">
            <p><i class="iconfont icon-tips"></i> 留言说明: </p>
            <p>务必填写有效的邮箱地址，负责不会收到回复信息的~</p>
        </el-row>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row class="form-top">
                <el-form-item label="昵称" prop="name" label-width='70px'>
                    <el-input v-model="ruleForm.name" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" label-width='70px'>
                    <el-input v-model="ruleForm.email" placeholder="请输入有效邮箱地址"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="内容" prop="content" label-width='70px'>
                    <el-input type="textarea" :rows="10" v-model="ruleForm.content" placeholder="Please writing your mind"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label-width='70px'>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-row class="commnet-total">
            <span>共{{count||0}}条评论</span>
        </el-row>
        <scroll-page :loading="loading" :offset="offset" :no-data="noData" v-on:load="load">
            <el-row class="commnets">
                <div class="item" v-for="(comment,index) in comments" :key="index">
                    <div class="left">
                        <avatar class="header-img" :size="40" :username="comment.nickname"></avatar>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <span class="user">{{comment.nickname}}</span>
                            <span class="sys">Win10</span>
                            <span class="exe">Chrome 81.0.4044.9</span>
                            <span class="time">{{comment.create_time}}</span>
                        </div>
                        <div class="right-bottom">
                            <div class="content">{{comment.content}}</div>
                            <div class="reply" v-if="comment.reply != null">
                                <div class="content"><i>站长回复：</i> <span v-html="comment.reply"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-row>
            <el-row :class="isShow">没有更多了~</el-row>
        </scroll-page>
    </el-card>
    
</template>
<script>
import Avatar from 'vue-avatar'
import ScrollPage from './ScrpllPage'
import {addMessage, getMessage} from '@/api/comment'
export default {
    name:'Comments',
    props:{
        params: {
            type: Object,
            required: true
        },
        offset: {
            type: Number,
            default: 100
        },
        page: {
            type: Object,
            default() {
                return {}
            }
        },
        query: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    watch: {
        'query': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage.pageNo = 1
                this.getArticles()
            },
            deep: true
        },
        'page': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage = this.page
                this.getArticles()
            },
            deep: true
        },
    },
    data(){
        return{
            ruleForm: {
                name: '',
                email:'',
                content:'',
                article_id:this.params.article_id
            },
            rules: {
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', required: true, message: '请输入有效邮箱地址', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '随便吐槽两句吧~', trigger: 'blur' }
                ]
            },

            loading: false,
            noData: false,
            innerPage: {
                pageSize: 10,
                pageNo: 1,
            },
            comments: [],
            isShow:'hide',
            count:0
        }
    },
    components: {
        Avatar,
        ScrollPage
    },
    created() {
      this.getMessage()
    },
    methods: {
        load() {
            this.getMessage()
        },
        getMessage() {
            let that = this
            that.loading = true
            that.query.page = that.innerPage.pageNo;
            that.query.size = that.innerPage.pageSize;
            that.query.article_id = that.params.article_id;
            getMessage(that.query).then(res => {
                let newMessage;
                if(that.innerPage.pageNo == 1){
                    newMessage = res.data.data
                    that.count = res.data.count;
                }else{
                    newMessage = res.data
                }

                if (newMessage && newMessage.length > 0) {
                    that.innerPage.pageNo += 1
                    that.comments = that.comments.concat(newMessage)
                    that.isShow = 'hide'
                    
                } else {
                    that.noData = true
                    that.isShow = 'show'
                }
            }).catch(error => {
                if (error !== 'error') {
                    that.$message({type: 'error', message: '评论加载失败!', showClose: true})
                }
            }).finally(() => {
                that.loading = false
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                addMessage(this.ruleForm).then(res =>{
                    if(res.code != 200){
                        this.$message.error(res.msg);
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            offset:100
                        });
                        this.innerPage.pageNo = 1;
                        this.comments = [];
                        this.load()
                        this.resetForm('ruleForm')
                        //this.$forceUpdate();
                    }
                })
            } else {
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        dateStr(date){
            //获取js 时间戳
            var time = new Date().getTime();
            //去掉 js 时间戳后三位，与php 时间戳保持一致
            time = parseInt((time - date) / 1000);
            //存储转换值 
            var s;
            if(time < 60 * 10){//十分钟内
                return '刚刚';
            }else if((time < 60 * 60) && (time >= 60 * 10)){
                //超过十分钟少于1小时
                s = Math.floor(time / 60);
                return  s + "分钟前";
            }else if((time < 60 * 60 * 24) && (time >= 60 * 60)){ 
                //超过1小时少于24小时
                s = Math.floor(time / 60 / 60);
                return  s + "小时前";
            }else if((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)){ 
                //超过1天少于30天内
                s = Math.floor(time / 60 / 60 / 24);
                return s + "天前";
            }else{ 
                //超过30天ddd
                var date = new Date(parseInt(date));
                return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
            }
        }
    },    
}
</script>
<style lang="stylus" scoped>
.show
    display block
    text-align center
.hide
    display none
.el-form
    width 100%
    .form-top
        width 100%
        display flex
        .el-form-item
            flex 1
.commnet-total
    color #303133
    line-height 36px
.tips
    line-height 2
    padding 10px 0 20px 0
    border-bottom 1px solid #ccc
    margin 0 0 20px 0
    .icon-tips
        font-size 18px
        color #f00
        font-weight bold
.commnets
    width 100%
    .item
        width 100%
        display flex
        padding 20px 10px
        box-sizing border-box
        border-bottom #ececec 1px solid
        .left
            width 6%                
        .right
            width 94%
            .right-top
                width 100%
                display flex
                span
                    line-height 30px
                .user
                    color #1abc9c
                    margin-right 10px
                .sys,.exe
                    text-align center
                    font-size 12px
                    background-color #ededed  
                    padding 0 10px
                    margin-right 10px
                .time
                    flex 1
                    text-align right
                    color #999
                    font-size 12px
            .right-bottom
                padding 10px 0
                line-height 2
                .content
                   padding-bottom 10px 
                .reply
                    display flex
                    padding-top 10px
                    border-top #ececec 1px solid
                    .content
                        border-bottom none
                        i
                            color rgb(255, 0, 0)
.pager
    width 100%
    padding 20px 0
    text-align center
</style>